<template>
  <div class="design-form-config">
    <Row label="单据名称">
      <a-input placeholder="请输入单据名称" v-model="formDefinition.formName"/>
    </Row>
    <Row label="单据KEY">
      <a-input placeholder="请输入单据Key" v-model="formDefinition.formKey"/>
    </Row>
    <Row label="数据表">
      <a-input placeholder="请输入数据表名称" v-model="formDefinition.tableName"/>
    </Row>
    <a-button ghost type="primary" @click="openFormCheckConfig" :icon="hasCheckFormulas"
              style="width: 100%" shape="round">校验规则</a-button>
    <FormCheckConfig :formDefinition="formDefinition" ref="FormCheckConfig"/>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@/components/hhd/design/FormDesigner/types';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import FormCheckConfig from '@comp/hhd/design/FormDesigner/form/check/FormCheckConfig.vue';

export default {
  name: 'FormConfig',
  components: {FormCheckConfig, Row},
  props: {
    formDefinition: createProps(Object, createFormDefinition),
  },
  methods: {
    openFormCheckConfig() {
      this.$refs.FormCheckConfig.setData()
    }
  },
  computed: {
    hasCheckFormulas() {
      return this.formDefinition && this.formDefinition.formCheckGroups && this.formDefinition.formCheckGroups.length && 'check' || undefined
    }
  }
}
</script>
<style>
.design-form-config {
  padding: 10px;
}
</style>